<template>
  <el-container class="app-container">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">

        <el-form-item prop="mainUrl" label="办公空间图片:">
          <img-upload class="form-pic" @upload-callback="handleUpload(arguments[0],{name:'mainUrl'})"
                      :imageUrl="form.mainUrl" uploadFrom="operation"></img-upload>
          <!--          <span class="form-item-tip">建议尺寸690*276，只能上传jpg/png格式文件，文件不能超过50kb</span>-->
        </el-form-item>
        <el-form-item prop="productName" label="办公空间名称:">
          <el-input v-model.trim="form.productName"></el-input>
        </el-form-item>
        <el-form-item prop="intro" label="map地址:">
          <el-input v-model.trim="form.intro" ></el-input><el-button><a :href="mapUrl">地图取点</a></el-button>
        </el-form-item>

        <el-form-item prop="memo" label="空间备注:">
          <el-input v-model.trim="form.memo" type="textarea"></el-input>
        </el-form-item>


      <el-form-item>
        <el-button type="primary" @click="onSubmit">保存</el-button>
        <el-button @click="()=>{this.$router.go(-1)}">取消</el-button>
      </el-form-item>
    </el-form>
  </el-container>
</template>

<script>
  import Tinymce from '@/components/Tinymce'

  // import pageApi from '@/api/courseManage/monthAgeIntro'

  export default {
    name: 'add',
    components: {
      Tinymce
    },
    data() {
      const monthAgeValidator = (rule, value, callback) => {
        if(!value.toString() || !this.form.endMonthAge.toString()){
          callback(new Error('请选择完整的月龄范围'))
        }else{
          callback()
        }
      }
      return {
        cateOptions: [],
        uploadType: {
          type: 'music',
          from: 'music'
        },
        monthOptions: this.$const.MONTH_OPTION(35),
        form: {
          monthAgeContentId: null,
          name: '',
          monthAge: '',
          endMonthAge: '',
          content:''
        },
        rules: {
          name: [
            { required: true, trigger: 'blur', message: '名称不能为空' },
            { min: 1, max: 20, message: '长度不能超过20个汉字' }
          ],
          monthAge: [{ required: true, trigger: 'blur', validator:monthAgeValidator }],
          content: [{ required: true, trigger: 'blur', message: '请填写内容' }]
        }

      }
    },
    methods: {
      handleUpload(url, obj) {
        this.form[obj.name] = url
      },
      handleRes(res) {
        let _this = this
        if (res.code === '200') {
          _this.$message.success(res.message)
          _this.$router.go(-1)
        } else {
          _this.$message.error(res.message)
        }
      },
      onSubmit() {
        let _this = this
        let { monthAgeContentId } = _this.$route.query
        _this.$refs['form'].validate((valid) => {
          if (valid) {
            if (!monthAgeContentId) {
              pageApi.create(_this.form).then((res) => {
                _this.handleRes(res)
              })
            } else {
              pageApi.update(_this.form).then((res) => {
                _this.handleRes(res)
              })
            }

          } else {
            return false
          }
        })
      },
      backClick() {
        this.$router.go(-1)
      },
      getById(id) {
        pageApi.getById(id).then(res => {
          setTimeout(()=>{
            this.form = Object.assign({}, this.form, res.body)
          },0)
        })
      },
    },
    created: function() {
      let { monthAgeContentId } = this.$route.query
      if (monthAgeContentId) {
        this.form.monthAgeContentId = monthAgeContentId
        this.getById(monthAgeContentId)
      }
    }
  }
</script>

<style lang="scss" scoped>

</style>
